<template>
    <div id="com-container">
        <div
            :id="$route.path === '/index' ? 'center-top-container-index' : 'center-top-container'"
            ref="box"
        ></div>
    </div>
</template>

<script>
import { AreasProportion } from '../request/api';
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            myChart: null,
            position: [['12.5%', '58%'], ['36%', '58%'], ['60%', '58%'], ['85%', '58%']]
        };
    },
    computed: {
        ...mapGetters({
            theme: 'theme'
        })
    },
    watch: {
        theme() {
            this.myChart.off('dblclick')
            this.myChart.dispose()
            this.initCharts()
            this.getData()
            this.changeCharts()
            this.dblClick()
        }
    },
    mounted() {
        this.initCharts()
        this.getData()
        window.addEventListener('resize', () => {
            this.changeCharts()
        })
        this.changeCharts()
        this.dblClick()
    },

    methods: {
        dblClick() {
            this.myChart.getZr().on('dblclick', () => {
                if (this.$route.path === '/index') {
                    this.$router.push('/centertop')
                } else {
                    this.$router.push('/index')
                }
            });
        },
        initCharts() {
            this.myChart = this.$echarts.init(this.$refs.box, this.theme)
            let option = {
                title: {
                    text: '主要地区农作物种植区域占比',
                    top: '10px',
                    left: '20px'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a0}:<br />{b0}: {c0}%',
                },
                series: []
            };
            this.myChart.setOption(option);
        },
        async getData() {
            let res = await AreasProportion()
            this.setCharts(res)
        },
        setCharts(res) {
            let series = res.map((item, index) => {
                return {
                    name: item.areas,
                    type: 'pie',
                    radius: ['40%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        formatter: '{a0}\n {c0}%',
                        position: 'center',
                        fontSize: '16',
                        fontWeight: 'bold'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    center: this.position[index],
                    data: [
                        { value: item.zb, name: '农作物' },
                        { value: item.other, name: '其他' }
                    ]
                }
            })
            let option = { series }
            this.myChart.setOption(option);
        },
        // 4、图表适配
        changeCharts() {
            let width = this.$refs.box.offsetWidth / 100
            let fontSize = this.$route.path === '/index' ? width * 2.8 : width * 3
            this.myChart.resize()
            let option = {
                title: {
                    textStyle: {
                        fontSize
                    },
                }
            }
            this.myChart.setOption(option);
        }
    },
};
</script>

<style scoped>
#center-top-container-index {
    width: 96%;
    height: 90%;
    margin: auto;
    border: 1px solid #38c5ec;
}
#center-top-container {
    width: 100%;
    height: 100%;
}
</style>
